<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            margin: 50px 100px;
        }
        div{
            margin: 50px 100px;
        }
    </style>
</head>
<body>
    <div>
        <h2>js历史,js输出语句</h2>
        js的创始人是布兰登.艾奇          1995年<br>
        js分为3大部分:ECMAscript DOM(Document Object Model) 文档对象模型  <br>
        BOM(Browser Object Model) 浏览器对象模型<br>
        js注释:<br>
            单行注释: //<br>
            多行注释: /**/<br>
        js输出方式:<br>
            console.log();         控制台  <br>
            document.write();  往文档里面写内容<br>
            document.writeIn(); 会加一个空格<br>
            alert();                        弹出框<br>
            console.log(prompt('你好'));              <br>    
            弹出框 有确定和取消两个按钮,点取消返回null 点确定 输入什么就返回什么<br>
            console.log(confrim('我美吗'))       弹出框   有两个值,点确定返回true  点取消返回false<br>
    </div>
    <div>
        <h2>变量</h2>
        声明变量  用 var 来声明变量<br>
        变量的命名规则:1.见名知义  2.严格区分大小写<br>
                    3.由字母 数字 下划线  $  组成,不能用数字开头<br>
                    4.不能以关键字,保留字命名(将来可能会用做保留字)<br>
        驼峰命名规则:首个单词首字母小写,剩下的每个单词首字母大写<br>
        var price = 10;    = 赋值   把=右边的内容赋值给左边<br>
        var  price = 12,         num  =   5;        用var声明多个变量,用逗号隔开<br>
        变量同名的情况下,后面的变量会把前面的覆盖掉<br>
        console.log(0.1+0.2）    0.30000000004    精度问题<br>
                num = 10;  console.log(num);<br>
        变量在用的时候,一般先用var声明,在赋值使用,<br>
        如果没有用var声明,直接赋值,它就是一个全局变量<br>
            var num;  console.log(num);<br>
        变量如果只用var声明,没有赋值,那么它的值是undefined(未定义)<br>
            console.log(num);<br>
        如果没有用var声明也没有赋值,那么就会报错<br>
    </div>
    <div>
        <h2>获取元素</h2>
        获取元素的方法：<br>
        document.getElementById();  通过id来获取元素<br>
        document.getElementsByTagName();  <br>
            通过标签获取元素<br>
            获取的是一组元素,它是一个类数组,有length属性<br>
            但是不具备数组的方法,有下标 与下标结合取出某一项<br>
        document.getElementsByClassName();<br>
            通过类名获取元素     IE8和IE8以下不兼容<br>
        document.querySelector()<br>
        document.querySelectorAll()<br>
        querySelector和querySelectorAll都是通过css选择器获取,在IE7和IE7以下不兼容<br>
        querySelector是获取一个<br>
        querySelectorAll 是获取一组<br>
        innerHTML  获取标签里面的内容,不包括表单<br>
        in1.value = '456'; 获取表单里面的内容<br>
        box.style         改变元素的样式<br>
        cssText            改变元素的样式<br>
        onclick         点击事件<br>
        box1.onclick = function(){<br>
        }<br>
        window.onload = function(){<br>
        }<br>
        window.onload当所有资源加载完成之后再加载js代码,<br>
        当js写在了布局前面,就需要加这个<br>
        一个页面只能用一次<br>
    </div>
    <div>
        <h2>js引入方式</h2>
        js引入方式:<br>
        1.内嵌<br>
            用script标签引入<br>
            script<br>
        2.外链<br>
            通过script标签src属性引入外部js文件<br>
            script src="js/1.js"<br>
        3.行内<br>
            在标签后面写js<br>
            div id="box" onclick="alert(1)"<br>
    </div>
    <div>
        <h2>数据类型</h2>
        基本数据类型<br>
        Number 数值  String  字符串  Boolean 布尔类型<br>
        undefined 未初始化   null 空对象<br>
        引用数据类型<br>
        Object 对象 (array,function,date,RegExp)<br>
        typeof()  检测数据类型<br>
        typeof两种写法: typeof(num)  typeof  num<br>
        typeof返回值都是一个小写的string<br>
        用typeof检测一个没有被声明的变量会返回undefined<br>
        typeof可以返回的六种数据类型<br>
        number string boolean  function  object undefined<br>
    </div>
    <div>
        <h2>类型转换</h2>
        任何一种数据类型都可以转换成以下三种Number String Boolean<br>
        Number()<br>
            Number转number还是自身 有前导0删除前导0<br>
            string转number   纯数值字符串，自身去掉引号<br>
                            空格字符串或者空字符串都是0<br>
                            非纯数值字符串    有字母  是  NaN<br>
            boolean转number  0是false  1是true<br>
            null转number是0   undefined转number是NaN<br>
        String()<br>
            任何一种数据类型转String加上引号就可以<br>
        toString()  <br>
                可以把 数值，布尔类型，字符串值转换成字符串类型 不能转undefined和null<br>
        Boolean()<br>
            数值转Boolean()  0 NaN是false  其他的数值为true<br>
            字符串转Boolean()   空字符串为false,其他的字符串为true<br>
            undefined和null转Boolean()都为false<br>
        parseInt() parseFlaot()参数可以是数值也可以是字符串,如果是字符串,可以包含字母,但是<br>
        不能以字母开头,否则为NaN<br>
        parseInt()取整,不会四舍五入                  parseFloat()取小数<br>

    </div>
    <div>
        <h2>运算符</h2>
        字符串与变量进行拼接:<br>
        1.先选择要替换的内容  2.按引号<br>
         3.两个 ++  4.把变量放在两个++的中间<br>
        NaN Not a Number   它是Number里面一个特殊的值,当运算失败的时候,就会出现NaN<br>
        isNaN()检测是不是一个数值,如果是返回false,如果不是返回true,它会先调用Number 方法 如果是NaN结果也是true<br>
        在js中 有算术  关系  逻辑  条件  赋值 运算符<br>
        赋值运算符:  =  +=  -=   *=   /=   %=<br>
        算数运算符:  + - * / %  ++ --<br>
        +号的作用:<br>
        如果两边都是数值,进行的是加法运算<br>
        如果一边是字符串,那么进行的是字符串的拼接<br>
        % 是取余数的意思<br>
        如果自增自减运算符单独使用 变量+1/-1<br>
         如果++/--配合其他元素符组合使用: ++/--在前 元素先+1/-1再取值运算<br> 
        ++/--在后 元素先取值运算再+1/-1<br>
        关系运算符:  > < >= < =  == ===  != !==  最终返回的结果是boolean<br>
        字符串的比较是比较ASCII编码<br>
        == 只判断值是不是相等,如果值相等就为true<br>
        === 判断值跟类型必须相等,结果才为true<br>
        != 只要值不相等  结果为true<br>
        !==  值和类型只要有一个不相等  结果为true<br>
        逻辑运算符     &&(与)   ||(或)    ！(非) 取反<br>
        ! (非):取反 如果是true就为false<br>
        &&(并且) 多个条件同时满足,它是一个找假值的过程   如果找不到返回最后一个值<br>
        ||   (或)  只要有一个条件成立就可以,它是一个找真值的过程<br>
        条件运算符(三目运算符):  条件？exp1:exp2   <br>
        如果条件成立,就执行语句一,反之执行语句二<br>
        运算符的优先级:先算术,在关系,在逻辑   从高到低  先算一目运算(!  ++  --)<br>
    </div>
    <div>
        <h2>字符串</h2>
        js转义字符:	\'  单引号<br>
            \" 双引号 <br>
            \\ 反斜杠 <br>
            \n 换行 <br>
            \r 回车 <br>
            \t tab制表符 <br>
            \b 退格符 <br>
            \f 换页符 <br>
        字符串创建方式:<br>
            构造函数创建:  var str = new String()<br>
            字面量创建:     var str = ''<br>
        字符串属性:<br>
            length 字符串的长度<br>
        字符串方法:<br>
        str.charAt(下标): 通过下标找对应的字符,不写参数为0<br>
        str.charCodeAt(下标):   通过下标找对应的ASCII编码  不写参数为0<br>
            ASCII编码: a是97 b是98 依次类推    A是65 B是66 依次类推<br>
            0是48  1是49  依次类推<br>
        String.fromCharCode():通过ASCII编码找对应的字符<br>
        str.toUpperCase():  把字符串转大写<br>
        str.toLowerCase():  把字符串转小写<br>
        str.substring():    字符串截取方法 <br>
        不写参数截取全部<br>
        1个参数是 从开始下标,一直截取到末尾<br>
        2个参数  第一个参数是从起始下标开始 包含起始下标,第2个参数是结束下标 不包含结束下标<br>
        substring如果起始位置大于结束位置它会互换  <br>
        str.substr()<br>
        1个参数是从下标开始,一直截取到末尾<br>
        2个参数 第一个参数是起始下标   第2个参数是个数<br>
        str.slice():<br>
        1个参数是 从下标开始,一直截取到末尾<br>
        2个参数  第一个参数是从起始下标开始 包含起始下标,第2个参数是结束下标 不包含结束下标<br>
        它不能自动检测,参数1必须小于参数二<br>
        它可以放负数,-1是从后面开始的      substring()不可以放负数<br>
        str.indexOf()   通过字符找下标<br>
        查找参数在字符串里面从左到右首次出现的位置下标,如果没有找到，返回-1<br>
        1个参数默认是从左边0开始找的<br>
        2个参数   第一个参数是找查找的字符  第二个参数是从第几位开始找<br>
        str.lastIndexOf()<br>
        从右面开始查找 如果没有找到返回的是-1  找到返回的是首次出现的下标位置<br>
        str.split()   切割方法<br>
        最后变成一个数组,用什么切割数组里面就不会出现这个字符<br>
        不写参数把整个字符串变成数组<br>
        可以有第二个参数代表最后的结果的个数<br>
        特殊的三个值:  空值和空字符串 代表完整的一组  空格字符串表示每个字符为一组<br>
        str.concat()     字符串的连接方法<br>
        str.trim()             去掉字符串首尾空格    <br>
        trimLeft()  去掉字符串左边的空格      trimRight()  去掉字符串右边的空格<br>
        repeat()     重复方式  不写参数为空   参数为几，就重复几次  参数如果是小数，会取整<br>
        link()    将字符串转换为超链接字符串 参数为a的href属性 需要配合innerHTML  <br>
        replace(被替换的内容, 新的内容):字符串替换 返回值是替换后的新字符串 不影响原字符串<br>
    </div>
    <div>
        <h2>对象/JSON</h2>
        var person = {<br>
            name :  "xiaoming",<br>
            age   :    18，<br>
           sex   ：  “女”<br>
         }<br>
         name,age的都是对象的属性,属性是一个变量,命名要遵循变量的命名规则<br>
         对象增删改查<br>
             给一个对象增加一个属性,直接用对象名.属性 = "属性值"     person.tel = “12345678909”<br>
             删除一个对象属性,需要添加delete操作符delete后面需要加空格    delete person.age<br>
             修改一个对象的属性,用对象名.属性 = "修改属性值的内容"     person.age = 20；<br>
             属性值的获取可以用对象名.属性 或者对象名['属性']<br>
         对象转字符串的方法:  JSON.stringify()<br>
             var personString = JSON.stringify(person);<br>
             console.log(personString);<br>
         字符串转对象的方法:   JSON.parse()<br>
             var personObject = JSON.parse(personString);<br>
         console.log(personObject);<br>
    </div>
    <div>
        <h2>条件语句</h2>
        if(条件判断){<br>
            当条件成立,执行里面的执行语句<br>
          }<br>
          if(条件判断){}else{}<br>
          如果条件成立就执行if里面的语句,条件不成立就执行else里面的语句<br>
          if(条件1){<br>
                条件语句1;<br>
            }else if(条件2){<br>
                条件语句2;<br>
            }else if…<br>
        var type = prompt('输入一个值');//字符串<br>
                // switch用来判断变量的不同取值 不能列范围<br>
                switch (parseInt(type)) {<br>
                    case 1:<br>
                        console.log('晴天');<br>
                        // 结束case语句 如果省略break 出现case穿透 不管是否满足下一个条件 直接执行下一个case 的语句直到break为止<br>
                        break;<br>
                    case 2:<br>
                        console.log('阴天');<br>
                        break;  <br>
                    case 3:<br>
                        console.log('雨天');<br>
                        break; <br>     
                    default:<br>
                        // 默认情况 : 所有case都不满足 就执行default<br>
                        console.log('没有该类型');<br>
                        break;<br>
                }<br>
    </div>
    <div>
        <h2>循环语句</h2>
        for循环:<br>
        语法:for(条件初始值;条件判断;条件变化){<br>
        }<br>
        while循环:<br>
        语法:while(条件){<br>
            语句体<br>
        }<br>
        先判断条件是不是成立,如果为真,就执行语句体<br>
        do while循环<br>
        语法:do{<br>
            语句体<br>
        }while(条件)<br>
        do while先走循环体,即使条件不成立,也会走一次循环,至少走一次循环<br>
    </div>
    <div>
        <h2>continue和break</h2>
        continue 跳过本次循环,后面的循环继续执行<br>
        break     break的标准定义是终止循环， 后面的循环不会执行break必须要放在循环里面 <br>
    </div>
    <div>
        <h2>函数</h2>
        函数：就是把相同功能的代码放在一个函数里面,用function<br>
        声明一个函数,函数声明后的参数是形参(形参是一个变量)   函数调用后面的参数<br>
        是实参  形参和实参是一 一对应的,函数调用是函数名加()<br>
        函数声明<br>
        function  test(){<br>
        }<br>
        函数声明可以先调用后声明<br>
        函数调用<br>
        test()<br>
        函数表达式  <br>
        var test = function test1(){<br>
        }<br>
        test()<br>
        匿名函数表达式 <br>
        var test = function(){}<br>
        test()<br>
        函数表达式调用是变量加() 不可以先调用后声明<br>
        函数的属性:   函数名.name   函数名.length<br>
        函数命名规范:<br>
             不能数字开头<br>
               字母 下划线  $ 数字组成<br>
             小驼峰命名法:符合单词首字母小写后面单词的首字母大写<br>
        函数参数<br>
         形式参数 --> 形参<br>
                     function demo(a,b,c){<br>
                         console.log(demo.length);<br>
                         console.log(arguments.length);<br>
                     }<br>
                     demo(1,2);<br>
                     实际参数 --> 实参<br>
                     参数是一一对应的<br>
                     形参和实参可以不相等<br>
        函数返回值<br>
        函数如果没有返回值,默认是undefined,函数的返回值就是return后面的内容<br>
        return后面是什么,函数的返回值就是什么<br>
        return返回多个值需要写成对象的格式<br>
        return的作用:1.终止代码2.返回值<br>
        全局变量和局部变量<br>
                函数内部可以访问到外部的变量,外部不能访问到函数内部的变量<br>
                 全局变量<br>
                    a = 1;<br>
                    function demo(){<br>
                        局部变量<br>
                        var b = 2;<br>
                        console.log(a);<br>
                        function demo1(){<br>
                             局部变量<br>
                            var c = 3;<br>
                            console.log(b);<br>
                        }<br>
                        demo1();<br>
                        console.log(c);<br>
                    }<br>
                    demo();<br>
        立即执行函数<br>
                立即执行,执行完成以后立即销毁<br>
                 立即执行函数   --> 初始化函数<br>
        立即执行函数两种写法:<br>
                           (function(){})()<br>
                           (function(){}()) w3c建议<br>
            只要是函数表达式就会被立即执行<br>
                var demo1 = function(){<br>
                             console.log(2);<br>
                        }()<br>
            函数声明表达式的方法: 加+ - !  ~<br>
        arguments代表的是所有的实参集合,是一个类数组,有length属性,<br>
        跟下标结合取出里面每一项,只能在函数里面用<br>
        callee/caller<br>
        callee() 返回实参列表所对应的函数<br>
        function test1()     <br>
            console.log(arguments.callee);  function test1(){}<br>
         }<br>
         test1();<br>
        caller()    返回当前被调用函数在哪个函数下被调用<br>
         function test1(){<br>
                  test2();<br>
            }<br>
           test1();<br>
           function test2(){<br>
             console.log(test2.caller);   function test1(){}<br> 
            }<br>
    </div>
    <div>
        <h2>预编译</h2>
        函数声明整体提升,变量只有声明提升，赋值不会提升<br>
        预编译发生在函数执行前一刻<br>
        预编译分为全局预编译和函数预编译<br>
        全局预编译:<br>
            1.生成一个GO对象    Global Object   全局上下文<br>
            2.找变量声明<br>
            3.找函数声明<br>
            4.执行<br>
        函数预编译:            actuvation object       局部上下文<br>
            1.生成一个AO对象<br>
            2.找变量声明和参数<br>
            3.将形参和实参相统一<br>
            4.在函数里找函数声明,将值赋给函数体<br>
             AO GO 是为了解决作用域 作用域链相关所产生的一切问题<br>
            例子:<br>
                    a = 1;<br>
                        function add(){<br>
                            console.log(a);  undefined<br>
                            a = 2;<br>
                            console.log(a);   2<br>
                            var a = 3;<br>
                            console.log(a);   3<br>
                        }<br>
                        add();<br>
                        var a;<br>
                        console.log(a);  1<br>
                    GO{<br>
                        a:undefined  --> 1<br>
                        add : function add(){}<br>
                    }<br>
                    AO{<br>
                        a:undefined --> 2 --> 3<br>
                    }<br>
    </div>
    <div>
        <h2>闭包</h2>
        var c = 10;<br>
        function b(){<br>
            var e = 20;<br>
            console.log(c);<br>
        }<br>
        b();<br>
        function d(){<br>
            console.log(c);<br>
        }<br>
        d();<br>
        console.log(e);<br>
    }<br>
    a();<br>
    子函数使用父函数局部变量的行为叫做闭包<br>
    子函数可以延长父元素的生命周期<br>
    可以拓展父函数的空间<br>
    在js中,函数内部局部变量只允许子函数使用<br>
    父函数不能使用子函数的局部变量 子函数可以使用父函数的变量 <br>
    </div>
    <div>
        <h2>数组</h2>
        数组的创建:<br>
         1.构造函数创建<br>
            var a1 = new Array(1, 2, 3);  一个参数是数组的长度<br>
            console.log(a1);<br>
         2.字面量创建<br>
             var a2 = [1,2,3];<br>
        数组的常用方法和属性:<br>
            属性:length  数组的长度<br>
        数组的方法:<br>
        arr.push()     push()是往数组末尾添加元素   返回值是新数组的长度 ,可以添加多个,原来的数组发生了变化 <br>
        arr.unshift()  unshift()是往数组前面添加元素  返回值是新数组的长度 ,原来的数组发生了变化<br>
        arr.pop()         pop()是从数组末尾删除元素   返回值是删掉的元素      原来的数组发生了变化<br>
        arr.shift()         shift()是从数组前面删除元素   返回值是删掉的元素      原来的数组发生了变化<br>
        pop() shift()      删除方法不能写参数<br>
        arr.reverse()         数组的倒序方法<br>
        arr.concat()           数组连接方法，原来的数组不会发生变化   不改变原数组<br>
        arr.slice                    数组截取方法   第一个参数起始下标,第二个参数结束下标,不包含结束下标<br>
        arr.indexOf              查找方法和字符串indexOf一样,如果找到返回首次出现字符的下标<br>
                        没有找到返回-1<br>
        arr.lastIndexOf()      从后面往前面查找<br>
        arr.sort()    不传参 按照元素的首字符ASCII排<br>
                console.log(arr);<br>
                 按照数字大小顺序排<br>
                 arr.sort(function (a, b) {<br>
                        return a - b;//从小到大<br>
                        return b - a;//从大到小<br>
                 });<br>
                 console.log(arr);<br>
        数组--> 字符串<br>
        arr.join()           最后变成一个字符串,如果不写参数,默认用逗号连接,写参数时,参数是什么就用什么连接<br>
                        不改变原数组<br>
        toString()<br>
        删除 替换 截取 插入<br>
                splice(起始的下标, 删除的长度, 替换的内容);<br>
                var arr = ['a', 'b', 'c', 'd', 'e', 'f'];<br>
                如果只给一个参数:表示从给定的下标开始一直删除的数组的末尾 返回的是删除的内容<br>
                 var rel = arr.splice(3);<br>
                 console.log(arr);//a b c<br>
                console.log(rel);//d e f<br>
                如果给两个参数:表示从给定的下标开始删除指定的长度的元素 返回的是删除的内容<br>
                var rel = arr.splice(3,1);<br>
                 console.log(arr);//a b c e f<br>
                console.log(rel);//d<br>
                如果给三个参数:表示从给定的下标开始删除指定的长度的元素 第三个的参数是替换的元素    <br>
                返回的是删除的内容<br>
                var rel = arr.splice(3, 1, 1,1,1,1);<br>
                 console.log(arr);//a b c 1 e f<br>
                console.log(rel);//d<br>
                // 插入<br>
                 var rel = arr.splice(2, 0, 'z');<br>
                 console.log(arr);//a b c 1 e f<br>
                 console.log(rel);//d<br>
        遍历数组的方法：<br>
            1.for循环<br>
                for(var i = 0;i < arr.length;i ++){    console.log(i,arr[i],arr)}<br></arr.length>
            2.for in<br>
                for(var attr in arr){<br>
                    console.log(attr,arr[attr]);<br>
                }<br>
            3.forEach方法<br>
                arr.forEach(function(item,index,arr){<br>
                    console.log(item,index,arr);<br>
                })<br>
            4.map方法<br>
                arr.map(function(item,index,arr){<br>
                    console.log(item,index,arr);<br>
                })<br>
            forEach map只能在数组里面使用,第一个参数代表的每一项,第二个参数代表数组的下标<br>
            第三个参数代表是数组<br>
               数组的遍历<br>
                         forEach();<br>
                         find();<br>
                         findIndex()<br>
                         map()<br>
                        var arr = [1, 2, 32, 2, 43];<br>
                         三个: 每一个元素, 对应的下标, 遍历的数组<br>
                        arr.forEach(function (item, index, array) {<br>
                          console.log(item, index, array);<br>
                         });<br>
                var arr1 = arr.find(function(value,index,arr){<br>
                            return value > 2;<br>
                            })<br>
                            console.log(arr1);<br>
                            var arr1 = arr.findIndex(function(value,index,arr){<br>
                                return value > 2;<br>
                            })<br>
                            console.log(arr1);<br>
            数组的过滤:<br>
                     filter()<br>
                     some()<br>
                    every()<br>
                    var arr = [12, 1, 23, 53, 21, 43];<br>
                    var rel = arr.filter(function (item, index) {<br>
                         console.log(item, index);<br>
                          return item>30;<br>
                    });<br>
                    console.log(rel);<br>
                    var newArr = [];<br>
                     arr.forEach(function (item) {<br>
                      if (item > 30) {<br>
                         newArr.push(item);<br>
                      }<br>
                     });<br>
                     console.log(newArr);<br>
            数组的累加<br>
                reduce()<br>
                 reduceRight();<br>
                   var arr = [1, 2, 3, 30, 50];<br>
                         var rel = arr.reduce(function (a, b) {<br>
                             return a + b;<br>
                          });<br>
                        console.log(rel);<br>
          数组的去重<br>
                    var arr = [1,2, 43, 1, 3, 2];<br>
                     var newArr = [];<br>
                     arr.forEach(function (item, index, array) {<br>
                     if (newArr.indexOf(item) == -1) {<br>
                         newArr.push(item);<br>
                      }<br>
                     });<br>
                    console.log(newArr);<br>
        类数组转数组: Array.from<br>
            function fn(){<br>
                console.log(arguments);<br>
                    var arr1 = Array.from(arguments);<br>
                    console.log(arr1);<br>
                        }<br>
                        fn(1,2,3,4)<br>
    </div>
    <div>
        <h2>date对象</h2>
        var date = new Date ();     声明一个日期对象<br>
         getFullYear() 获取完整年份(浏览器都支持)<br>
         getMouth()  + 1    获取月 <br>
        getDate() 获取日 <br>
         getDay() 获取星期 <br>
         getHours() 获取小时 <br>
        getMinutes()    获取分钟 <br>
        getSeconds() 获取秒 <br>
        getTime()    <br>
        时间戳, 从1970年1月1日到现在的时间的毫秒数<br>
        var date = new Date('2000,1,1')<br>
        日期里面也可以设置时间,两个时间相减得到一个毫秒数<br>
        date.setFullYear(2020);   设置年<br>
        date.setMonth(4)  设置月<br>
        console.log(date.getMonth() + 1);  设置月<br>
        console.log(date.setDate(31));  设置日<br>
        date.setHours() 设置时<br>
        date.setMinutes();  设置分<br>
        date.setSeconds();  设置秒<br>
    </div>
    <div>
        <h2>Math对象</h2>
        Math.max()     求最大值<br>
        Math.min()     求最小值<br>
        Math.abs()     求绝对值<br>
        Math.floor()   向下取整<br>
        Math.ceil()     向上取整<br>
        Math.round()   四舍五入<br>
        Math.sqrt()      算术平方根<br>
        Math.pow()    求几次幂<br>
        Math.exp()    <br>
        Math.PI           π      <br>    
        Math.random()  产生0-1之间的随机数,包括0但是不包括1<br>
        产生 min - max 之间的随机一个数<br>
        function randomForm(min,max){<br>
            return Math.floor(Math.random() * (max - min + 1) + min);<br>
        }<br>
    </div>
    <div>
        <h2>定时器</h2>
        setInterval()<br>
        重复定时器 每隔一段时间就会执行一次代码 第一个参数是函数名 第二个是参数是时间 时间是一个毫秒数<br>
        setTimeout()<br>
        间隙定时器:就执行一次<br>
        清除定时器：clearInterval(定时器名称)<br>
                    clearTimeout(定时器名称)<br>
        定时器里面的this指向window<br>
    </div>
    <div>
        <h2>事件</h2>
        事件里面的this指向事件源(事件前面的元素)<br>
        onclick    点击事件<br>
        ondblclick  双击事件<br>
        onmouseover   移入事件<br>
        onmouseout    移出事件<br>
        onmousemove  移动事件<br>
        onmouseenter   进入事件不支持事件冒泡<br>
        onmouseleave   离开事件不支持事件冒泡<br>
        onmousedown   鼠标按下事件(鼠标左右键和滚轮都会触发此事件)<br>
        onmouseup       鼠标抬起事件(鼠标左右键和滚轮都会触发此事件)<br>
        onfocus              得到焦点,触发此事件<br>
        onblur                失去焦点,触发此事件<br>
        onkeydown       键盘按下事件<br>
        onkeyup             键盘抬起事件<br>
        onkeypress        在键盘按下抬起中间触发,不支持某些功能键<br>
        onchange           值被改变时触发<br>
        onresize              窗口大小发生改变时触发<br>
        onscroll               滚动事件<br>
        事件对象:event<br>
        兼容写法: var e = e || event<br>
    </div>
    <div>
        <h2>window对象</h2>
        window.open()  <br>
        打开一个窗口,第一个参数是打开窗口的网址<br>
        第二个参数:不写参数,默认在新窗口打开,写参数_self在本窗口打开<br>
        window.close()<br>
        关闭一个窗口,不用写参数,close默认关闭的是本窗口,close前面<br>
        是哪个窗口,关闭的就是哪个窗口<br>
        window.location<br>
        window.location.href    本地地址<br>
        window.location.search    ?后面的内容,包括？<br>
        window.location.hash       #后面的内容包括#<br>
        window.navigator<br>
        window.navigator.userAgent    得到用户信息<br>
    </div>
    <div>
        <h2>第一天复习</h2>
        文档声明:声明当前文件为html文件,并且是h5的版本<br>
        !Doctype html<br>
        html是一种树状结构<br>
        html骨架:html>head&body<br>
        html:根元素  界面当前的范围<br>
        html lang="en"<br>
        锚点/锚链接:页面内容定位<br>
        a标签还可以调用函数<br>
        a href="javascript:fn();" a<br>
        select name="" id="sel"<br>
            option  width   option	<br>
            option  height  option<br>
            option  background option<br>
        select<br>
        option: 标签之间的内容是显示的内容 value值:将来被选中时作为整个select的value值 如果option没有设置value就将option之间的内容作为整个select的value<br>
        html(结构) css(样式) js(脚本)<br>
        对象/json:JS中的一种数据类型<br>
        dom:document object model<br>
        键值对(key-value)的形式存储数据<br>
        var o = {name：'zhang3'，age:18}<br>
        对象数据的使用:<br>
        1.点语法:console.log(0.name);<br>
        2.[]         console.log(0['age'])<br>
        input:只要用户输入就会触发该事件<br>
        sel.oninput = function（）{<br>
            console.log(1);<br>
        }<br>
        display之间的转换:<br>
            block 块级元素，独占一行，可以设置宽高<br>
            inline-block  行内块，不换行,可以设置宽高<br>
            inline  行内元素,不换行,不能设置宽高,内容撑开<br>
            none 不显示<br>
            display:none 页面上不占位置,dom结构上保留<br>
            visibility:hidden  页面上占位置 dom结构上保留，本质是修改了透明度<br>
            opacity:0<br>
            标准流(文档流)的布局: 严格按照显示模式(display)从上至下的布局<br>
            清除浮动:清除浮动造成的影响：<br>
            1.给父级加高度<br>
            2.给父级加overflow:hidden<br>
            3.隔墙法/空墙法:在浮动元素下加一个空盒子设置clear:both;<br>
            4.伪元素清除法: 给浮动元素的父元素添加一个类名clearfix<br>
            浮动: 脱离文档流 不受显示模式的限制 显示类似于inline-block 浮动在标准流的上方 在标准流不占位置<br>
            浮动的影响: 浮动的元素在标准流中不占位 不能撑开父元素的高度 影响浮动元素下方元素的布局<br>
    </div>
    <div>
        <h2>第二天复习</h2>
        position: 子绝父相 给子元素设置绝对定位 给父元素设置相对定位 保证子元素始终以父元素作为参照<br>
        static:静态定位 元素默认的定位方式<br>
        absolute:绝对定位 脱标 参照物是以父元素中第一个非静态定位的元素作为参照 如果父元素中都是静态定位 则以浏览器作为参照<br>
        relative:相对定位 不脱标 以元素当前位置作为参照<br>
        fixed:固定定位 脱标 以浏览器作为参照 不随页面的滚动而滚动<br>
        em:1em相当于是当前元素的一倍字体大小<br>
        rem:1rem相当于是根元素的一倍字体大小<br>
        变量: 见名知义<br>
        typeof  操作符<br>
        var a = 10   用var声明变量<br>
        数据类型:<br>
            基本数据类型:number string boolean undefined<br>
            引用数据类型:object null<br>
            undefined: 未初始化 有变量 没有初始值<br>
            null:空对象<br>
            is not defiend:未定义 没有这个变量<br>
            数据类型相互转换<br>
                任何类型和字符串做加法运算都是字符串的拼接<br>
                数学运算: 都要将其他类型转为数字<br>
            setInterval:间歇(循环)定时器 最小间隔10ms<br>
            setTimeout:超时定时器 最小间隔4ms<br>
            标准盒模型:css设置width/height = content<br>
            怪异盒模型:css设置width/height = content + padding + border<br>
    </div>
    <div>
        <h2>第三天复习</h2>
        运算符<br>
        赋值运算符: = <br>
                 数学运算符: + - * / % <br>
                var a = 10;<br>
                 a += 2;// a = a + 2<br>
                 比较运算符: > < >= <= == === !=<br>
                ==:只比较值是否相等<br>
                ===:值和类型都要相等<br>
            逻辑运算符: && || !<br>
            自增自减运算符: ++ --<br>
            如果自增自减运算符单独使用 变量+1/-1<br>
             如果++/--配合其他元素符组合使用: ++/--在前 元素先+1/-1再取值运算 <br>
            ++/--在后 元素先取值运算再+1/-1<br>
        流程语句:<br>
            条件结构<br>
                        if(条件){<br>
                            条件语句;<br>
                        }<br>
                        if(条件){<br>
                            条件语句1;<br>
                        }else {<br>
                            条件语句2;<br>
                        }<br>
                        三元/三目运算符<br>
                        条件?条件语句1:条件语句2;<br>
                        if(条件1){<br>
                            条件语句1;<br>
                        }else if(条件2){<br>
                            条件语句2;<br>
                        }else if…<br>
                var type = prompt('输入一个值');//字符串<br>
                        // switch用来判断变量的不同取值 不能列范围<br>
                        switch (parseInt(type)) {<br>
                            case 1:<br>
                                console.log('晴天');<br>
                                // 结束case语句 如果省略break 出现case穿透 不管是否满足下一个条件 直接执行下一个case 的语句直到break为止<br>
                                break;<br>
                            case 2:<br>
                                console.log('阴天');<br>
                                break;  <br>
                            case 3:<br>
                                console.log('雨天');<br>
                                break;      <br>
                            default:<br>
                                // 默认情况 : 所有case都不满足 就执行default<br>
                                console.log('没有该类型');<br>
                                break;<br>
                        }<br>
            onsubmit<br>
                提交表单触发此事件<br>
                myFrom.onsubmit = function(){<br>
                    alert(1);<br>
                }<br>
    </div>
    <div>
        <h2>第四天复习</h2>
        过渡:元素的属性从一个具体值到另一个具体值之间的变化添加一个缓动过程<br>
        过渡的持续时长: 必须属性<br>
                    transition-duration: 0.35s;<br>
                    过渡延迟<br>
                    transition-delay: <br>
                    过渡属性: 不写或者给all都表示所有属性<br>
                    transition-property: width;<br>
                    过渡缓动效果<br>
                    transition-timing-function: ease-in-out;<br>
            动画:<br>
            动画必须属性: 指定动画名字 指定动画的持续时长<br>
                        animation-name: donghua;<br>
                        animation-duration: 0.75s;<br>
                        infinite:无穷次<br>
                        动画重复的次数<br>
                        animation-iteration-count: infinite;<br>
                        动画的填充模式: forwards表示动画停留在最后一帧的画面<br>
                        animation-fill-mode: backwards;<br>
                        animation-fill-mode: forwards;<br>
                        animation-direction: reverse;<br>
                         动画的缓动效果<br>
                        animation-timing-function: ease-in-out<br>
            定义动画:关键帧动画  @keyframes<br>
            2种写法:<br>
                @keyframes donghua {<br>
                            from{width:400px;background-color: red;left:0;}<br>
                            to{width:100px;background-color: yellow;left: 100px;}<br>
                        }<br>
                        @keyframes donghua {<br>
                            0%{width:400px;background-color: red}<br>
                            100%{width:100px;background-color: yellow}<br>
                        }<br>
    </div>
    <div>
        <h2>JSON</h2>
        json数据:通过键值对(key-value)存储数据<br>
        对象<br>
        var date  = {<br>
            name ：'zhangsan'，<br>
            age    ：  20<br>
        }     <br>
            标准json: 属性名必须是字符串<br>
               1.点语法: 对象.属性名 对象.方法名()<br>
                 只能点具体的属性值<br>
             2.通过中括号[]<br>
                   var key = 'name';<br>
                   console.log(data.name)<br>
                    console.log(data.key)<br>
                   console.log(data[key])<br>
                   console.log(data['key'])<br>
            in:关键字判断对象是否包含某个属性或者方法 返回值是一个布尔值<br>
                console.log('name' in data);//true<br>
               console.log('zhang3' in data);<br>
            JSON<br>
            console.log(JSON);<br>
            var str = '{"name":"zhang3","age":20}';<br>
            JSON.parse: json字符串-->对象 只能转标准的JSON字符串<br>
            console.log(JSON.parse(str));<br>
             eval()<br>
            var data = eval(`(${str})`);<br>
            console.log(data);<br>
            JSON.stringify: 对象-->json字符串<br>
            var o = {<br>
                img:'https://img3.doubanio.com/view/photo/l/public/p25637    66934.webp',<br>
                title:'陈情令'<br>
            }<br>
            var str = JSON.stringify(o);<br>
            console.log(str);<br>
            for-in:遍历json对象<br>
            for(var key in o){<br>
                console.log(key);<br>
                console.log(o[key]);<br>
            }<br>
    </div>
    <div>
        <h2>dom尺寸属性和方位属性</h2>
        offsetWidth/height   盒模型的大小    content+padding+border<br>
        clientWidth/height   盒模型的可视区大小    content+padding<br>
        scrollWidth/Height: 元素内容可滚动的尺寸<br>
        offsetLeft/Top: 元素与有定位的父元素的距离<br>
        clientLeft/Top: 盒模型的边框宽度(border-width)<br>
        scrollLeft/Top: 元素内容滚动过的距离 <br>
        onscroll  滚动事件,监听页面的滚动<br>
        滚动事件一般绑定给document或者window<br>
        让滚动条滚动: <br>
             window上三个方法:scroll(),scrollTo(),scrollBy()<br>
                  三个方法功能类似,用法都是将x,y坐标传入.即实现让滚动条滚动到当前距离<br>
                   区别:scrollBy()会在之前的数据基础之上做累加,scroll(),scrollTO()不会做累加<br>
                box.onclick = function(){<br>
                            console.log(1);<br>
                             window.scroll(0,100);<br>
                            window.scrollBy(0,100);<br>
                            window.scrollTo(0,100);<br>
                        }<br>
    </div>
    <div>
        <h2>dom基本操作</h2>
        DOM：页面元素描述为一个由多层节点构成的树形结构。是Document Object Model 的首字母的缩写。<br> 
        节点<br>
         定义：文档对象模型 Document Object Model 是定义和访问HTML 的标准方式。<br>
        DOM 将HTML 认证文档呈现为带有元素，属 性和文本的树结构------称为节点树<br>
        dom  : dom对象   dom节点  dom元素<br>
        dom查找元素的方法：<br>
            document.querySelector('选择器')  返回的是一个元素 返回的符合给定的选择器选择第一个元素<br>
            document.querySelectorAll('选择器')   返回值是一个类数组<br>
            document.getElementById()<br>
            document.getElementsByName()<br>
            document.getElementsByTagName()<br>
            document.getElementsByClassName()<br>
            节点的创建<br>
            document.createElement  创建元素节点<br>
            var  oDiv = document.createElement('div')<br>
            document.createTextNode  创建文本节点<br>
            document.createDocumentFragment()	 创建文档碎片<br>
            节点的追加<br>
            父元素.appendChild()<br>
            document.body.appendChild(oDiv)<br>
            节点的移除<br>
            父元素.removeChild(被删除的元素)<br>
            document.body.removeChild(oDiv)<br>
            被删除的元素.remove<br>
            oDiv.remove()<br>
            节点的插入<br>
            父元素.insertBefore(新的节点, 参照的节点);  可以使用已有的节点插入<br>
            shu.insertBefore(zhao, zhang);<br>
            节点的替换<br>
            父元素.replaceChild(新的节点,被替换的节点)  可以使用已有的节点替换<br>
             shu.replaceChild(zhao, zhang);<br>
            节点的复制<br>
             cloneNode(是否拷贝内容 默认false);<br>
            var copyNode = guan.cloneNode(true);<br>
            节点属性<br>
            系统提供的属性   dom.style       获取类名:box.className<br>
            自定义属性不能通过点语法访问<br>
            获取元素的任何属性和方法:<br>
                    getAttribute();   获取元素属性<br>
                    setAttribute();    设置元素属性<br>
                    removeAttribute();   移除元素属性<br>
                    hasAttribute()          判断有没有这个属性<br>
               计算样式    元素最后生效的样式<br>
               非w3c标准:<br>
                ele.currentStyle.width<br>
                 返回的计算样式的值不是经过转换的绝对值<br>
                IE独有的属性<br>
                w3c标准<br>
            getComputedStyle(ele, false).backgroundColor<br>
            返回的计算样式的值都是绝对值，没有相对单位<br>
            IE8 及 IE8以下不兼容<br>
            innerHTML    获取元素里的内容,包括标签,可以解析<br>
            innerText      获取元素里的文本  不包括标签名<br>
            outerHTML     获取元素的内容   包括标签和自身标签<br>
            outerText        获取文本内容 不包括标签<br>
            textContent     火狐低版本获取文本内容 不包括标签<br>
            tagName      获取元素的标签名,返回值是大写的<br>
            console.log(box.tagName);     DIV<br>
            document.body      获取body<br>
            document.documentElement    获取html<br>
            document.getElementsByTagName('*')   *是获取所有标签<br>
            children   所有子元素<br>
            childNodes    所以子元素(包含文本节点)<br>
             parentNode   所有父元素<br>
             firstChild        第一个子节点(包含文本节点)<br>
            firstElementChild    第一个元素子节点(不包含文本节点) <br>
            lastChild         最后一个子节点(包含文本节点)<br>
            lastElementChild   最后一个元素子节点(不包含文本节点)<br>
            previousSibling    上一个兄弟节点:包含文本<br>
            previousElementSibling;   上一个兄弟元素节点  不包含文本<br>
            nextSibling            下一个兄弟节点:包含文本<br>
            nextElementSibling  下一个兄弟元素节点   不包含文本<br>
            node.childElementCount  === node.children.length  当前元素节点的子元素节点个数<br>
            offsetparent  找最近有定位的父元素<br>
              节点类型:<br>
            nodeName  元素的标签名,以大写的的形式表示<br>
            nodeValue   Text节点或Comment节点的文本内容    可改<br>
            nodeType    该节点的类型   文本节点 3 元素节点 1  注释节点  8<br>
    </div>
    <div>
        <h2>方位对象</h2>
        方位对象:存储了元素的位置和大小的一个对象<br>
        showBox.getBoundingClientRect()<br>
        x    元素距离浏览器的水平距离<br>
        y<br>
        width<br>
        height<br>
        left<br>
        right<br>
        top<br>
        bottom<br>
    </div>
    <div>
        <h2>延迟加载,下拉自动刷新,吸顶条</h2>
        延迟加载的原理:页面滚动过的距离+页面可视区大小>=元素距离顶部的距离<br>
        说明图片需要显示<br>
        if (document.documentElement.scrollTop+document.documentElement.clientHeight >= showImg.offsetTop) {<br>
                    showImg.src = showImg.getAttribute('load_src');<br>
                }<br>
        下拉刷新的原理:<br>
            页面滚动过的距离+页面可视区的大小>=页面可滚动的区域<br>
            1.显示等待视图<br>
            2.请求数据<br>
            3.隐藏等待视图<br>
            4.加载数据<br>
        吸顶条:<br>
            页面滚动的距离>=元素距离顶部的距离<br>
            就给元素设置固定定位top值为0<br>
            否则就设置静态无定位<br>
            var boxTop = showBox.offsetTop;<br>
                onscroll = function () {<br>
                    if (document.documentElement.scrollTop >= boxTop) {<br>
                        showBox.style.position = 'fixed';<br>
                        showBox.style.top = 0;<br>
                    }else {<br>
                        showBox.style.position = 'static';<br>
                        showBox.style.top = 0;<br>
                    }<br>
                }<br>
    </div>
    <div>
        <h2>动画框架(TwwenLite)</h2>
          TweenLite.from()<br>
          TweenLite.to()<br>
          TweenLite.fromTo()<br>
                 TweenLite.to(运动的元素,运动时间/帧数,配置对象)<br>
                配置对象：{<br>
                    css:{运动的样式  属性名：属性值,属性值1,属性值2},<br>
                    ease:缓动效果<br>
                    useFrames:是否使用关键帧  默认false(不使用,使用秒数)<br>
                    onComplete:动画执行完成后的回调函数,<br>
                    onUpdate:动画执行中的回调函数,<br>
                    onStart:动画开始时的回调函数,<br>
                    onCompleteScope:指定动画完成时的回调函数中的this指向<br>
                    onUpdateScope:指定动画执行中的回调函数中的this指向<br>
                    onStartScope:指定动画开始时的回调函数中的this指向<br>
                delay:  延迟时间<br>
                }<br>

             var allBox = document.querySelectorAll('.box');<br>
                allBox[0].onclick = function () {<br>
                     TweenLite.to(this, 0.5, {<br>
                      css:{left:200},<br>
                     ease: Bounce.easeOut,<br>
                   useFrames:true,<br>
                     onComplete:function () {<br>
                            console.log('动画执行完成');<br>
                         allBox[0].innerHTML = '谢谢观看';<br>
                       console.log(this);<br>
                    },<br>
                      onUpdate:function () {<br>
                         console.log('动画执行完成');<br>
                    console.log('update');<br>
                      },<br>
                     onStart:function () {<br>
                        console.log('动画要开始了');<br>
                   },<br>
                    onCompleteScope:allBox[0]<br>
                   })<br>
    </div>
    <div>
        <h2>瀑布流,无缝轮播 放大镜 原理</h2>
        瀑布流原理:1.确定列数,2.确定第一行布局,记录每一行的下标和高度3.判断最短的那一列的高度,往最短高度的那一列追加元素,追加完元素之后,更新最短那一列的高度<br>
        无缝轮播原理:左右点击的， 第一张和最后一张图一样，当最后一张再往后点击的时候，瞬间回到第1张，然后在从1张走到2张<br>
        放大镜原理:<br>
                鼠标在小图上移动时，通过捕捉鼠标在小图上的位置，定位大图片的相应位置。<br>
                鼠标移动的方向与大图片移动的方向相反<br>
    </div>
    <div>
        <h2>事件</h2>
        事件类型：<br>
        鼠标事件：<br>
        click(点击) dblclick(双击) mouseover(移入) mouseout(移出) mouseenter(进入) mouseleave(离开)<br>
                 wheel(滚动)  contextmenu(右键)  mouseup(抬起) mousedown(按下)<br>
                 键盘事件:keydown keypress  keydown   键盘事件只能绑定为body html document window上<br>
                 表单事件：focus(得到焦点) blur(失去焦点) input change submit<br>
                 浏览器事件:load(加载完成) resize(窗口大小发生改变) scroll(滚动)<br>
        事件对象(event)：<br>
            事件对象:事件产生时,浏览器会将事件相关信息封装成一个对象 就是事件对象<br>
            事件对象的获取：<br>
                    w3c标准：通过回调函数传参<br>
                    非w3c标准：将事件对象封装成window的event属性<br>
                    兼容:var ev = e || event<br>
            鼠标事件对象的方法：<br>
                    e.clientX/Y 鼠标事件产生时,鼠标距离浏览器可视区左上角的坐标<br>
                        console.log(evt.clientX,evt.clientY);<br>
                         e.offsetX/Y 鼠标事件产生时,鼠标距离产生事件的元素的左上角位置<br>
                        console.log(evt.offsetX,evt.offsetY);<br>
                       e.pageX/pageY 鼠标事件产生时,鼠标距离页面左上角的位置<br>
                        console.log(evt.pageX,evt.pageY);<br>
                         e.screenX/Y 鼠标事件产生时,鼠标距离屏幕左上角位置<br>
                        console.log(evt.screenX,evt.screenY);<br>
            键盘事件对象的方法:<br>
                keyCode 键码 码值<br>
                键盘0-9  键值: 48-57<br>
                箭头左上右下  键值:37-40<br>
                键盘a-z     键值:65-90<br>
                空格:    键值:32<br>
                组合键: ctrl + enter<br>
                esc     键值:27   enter 13<br>
                onkeydown  键盘按下   onkeyup 键盘抬起<br>
            滚轮事件<br>
            事件绑定 事件监听:<br>
                   事件模型:元素处理事件的方式<br>
                     事件绑定：dom.on + 事件类型<br>
                     事件监听:addEventListener()/removeEventListener()<br>
                      事件绑定的弊端：同一个元素的同一种事件类型只能绑定一个回调函数<br>
                       取消事件绑定：置为null<br>
                       box.onclick = null;<br>
                    addEventListener('事件类型',回调函数,是否捕获(一般都为false 表示冒泡))  IE9以下不兼容<br>
                attachEvent(事件类型+on, 回调函数)   IE独有的方法<br>
                removeEventListener()/detachEvent()   可以解除匿名函数<br>
                     box.addEventListener('click',function(){<br>
                        this.style.backgroundColor = 'red';<br>
                     },false)<br>
                      监听的匿名函数无法被移除<br>
                box.addEventListener('click',fn,false);<br>
                        function fn(){<br>
                            this.style.width = '400px';<br>
                            console.log('click');<br>
                        }<br>
                        setTimeout(function(){<br>
                            box.removeEventListener('click',fn,false);<br>
                        },2000)<br>
                    拖拽的原理：<br>
                        1.鼠标按下: 记录鼠标在元素上的位置<br>
                          2.鼠标移动: 拿到移动时鼠标到可视区的坐标减掉鼠标在元素上的位置 就是元素的left和top定位<br>
                        3.鼠标松开: 将鼠标移动事件置为null<br>
                                    事件冒泡和捕获<br>
                        事件传递/事件流:事件产生后会沿着dom结构传递,<br>
                        从产生事件的元素到父元素之间<br>
                        事件冒泡:从内到外执行<br>
                        事件捕获：从外到内执行<br>
                        只要chrome有事件捕获，IE没有,IE只有冒泡<br>
                        事件默认的传递发生：冒泡传递<br>
                        取消事件冒泡： event.cancelbubble = true    event.stopPropagation()<br>
                        取消默认事件：  return false      event.preventDefault()  event.returnValue = false<br>
                    事件委托:<br>
                            原理: 利用事件冒泡来实现的，只用一个事件处理程序,就可以管理某一项类型的所有事件<br>
                            优点:<br>
                                    1. 性能 不需要循环所有的元素一个一个进行绑定事件<br>
                                    2. 灵活  当有新的子元素是不需要重新绑定事件<br>
                            例子:<br>
                                document.body.onclick = function(e){<br>
                                            var evt = e || event;<br>
                                            if(evt.target.tagName == 'DIV'){<br>
                                                evt.target.style.backgroundColor = 'red';<br>
                                            }<br>
                                        }<br>
                            高级事件:<br>
                                 widnow.onload  等待页面加载完成之后(包括图片 文件 视频 音频) <br>
                                            兼容:<br>
                                            缺点：速度相对来说慢<br>
                                        DOMContentLoaded  当dom加载完成之后(当浏览器加载完所有标签后) <br>
                                            兼容:高级浏览器<br>
                                                IE11不兼容<br>
                                        onreadystatechange  当readyState(准备状态)改变的时候<br>
                                            兼容IE11<br>
                                            准备状态<br>
                                                    loading 载入中<br>
                                                    interactive  已加载,文档用户可以开始交互<br>
                                                    complete   载入完成<br>
                                            Dom document Object model	<br>
                                            BOM browser Object   model<br>
                                            src 替代资源<br>
                                            img script<br>
                                            href  链接资源<br>
                                            a   link<br>
                                            document.ready(function(){})<br>
                            例子:<br>
                             window.onload = function(){<br>
                                        var oBox = document.querySelector('.box');<br>
                                        console.log(oBox);<br>
                                    }<br>
                                    addEventListener('DOMContentLoaded',function(){<br>
                                    },false)<br>
                                    // ie11<br>
                                    document.onreadystatechange = function(){<br>
                                        if(document.readyState == 'complete'){<br>
                                             var oBox = document.querySelector('.box');<br>
                                            console.log(oBox);<br>
                                        }<br>
                                    }<br>
    </div>
    <div>
        <h2>this指向</h2>
        this是javascript里面的关键字,this指的是一个对象<br>
        以函数调用时this指向 window<br>
        以方法调用时this指向调用方法的那个对象<br>
        以构造函数调用时this指向新创建的那个对象<br>
        改变this指向的方法: call() apply()  bind()<br>
        相同:都可以改变this指向<br>
        不同:传参方式不同  call() 第二个值是无限传参  apply()  第二个值是一个数组<br>
        bind()  不能直接调用，需先赋值给变量，变量再调用<br>
    </div>
</body>
</html>